<template>
  <div class="box-full m-relative">
    <div class="m-absolute b-0 w-full t-0 box-border p-14">
      <a-scrollbar style="height: 100%; overflow-y: auto; overflow-x: hiddeh">
        <a-form ref="formRef" :model="form" size="medium" auto-label-width>
          <a-form-item label="企微微信id：" field="wxId">
            <div class="w-full">
              <a-input v-model="form.wxId" placeholder="请输入" />
              <div style="color: red" class="mt-10">*企业微信管理后台>我的企业>企业信息中获取</div>
            </div>
          </a-form-item>
          <a-form-item label="客服链接：" field="wxUrl">
            <div class="w-full">
              <a-input v-model="form.wxUrl" placeholder="请输入" />
              <div style="color: red" class="mt-10">
                *企业微信管理后台>应用管理>微信客服>查看客服账号信息>APP接入>客服链接
              </div>
            </div>
          </a-form-item>
          <div class="w-full h-20n"></div>
        </a-form>
      </a-scrollbar>
    </div>
    <div
      class="m-absolute w-full b-0 py-m pl-20 bgfff z-index-10"
      style="box-shadow: 0 -5px 8px -5px rgba(0, 0, 0, 0.1)"
    >
      <a-space>
        <a-button @click="resetForm">
          <template #icon>
            <icon-delete />
          </template>
          <template #default> 清除 </template>
        </a-button>
        <a-button @click="onChange" type="primary">
          <template #icon>
            <icon-check />
          </template>
          <template #default> 选择 </template>
        </a-button>
      </a-space>
    </div>
  </div>
</template>
<script setup>
import { Message } from '@arco-design/web-vue'
import { reAssign } from '@/utils/common'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const loading = ref(false)
const formRef = ref()
const form = reactive({
  wxId: undefined,
  wxUrl: undefined
})

// 重置表单
const resetForm = async () => {
  reAssign(form, false)
}

watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 11 && !!newValue.inputValue) {
      const inputValue = newValue.inputValue
      const inputValueF = inputValue.split('wxId=')[1]
      const inputValueFF = inputValueF.split('&wxUrl=')
      reAssign(form, {
        wxId: inputValueFF[0],
        wxUrl: inputValueFF[1]
      })
    } else {
      resetForm()
    }
  },
  { deep: true, immediate: true }
)
// 点击选择
const onChange = (id) => {
  let url = ''
  if (props.tabCurrentInfo.isEnable == 1) {
    url = item.rule
  } else {
    url = `platform-customer-service?wxId=${form.wxId}&wxUrl=${form.wxUrl}`
  }
  emit('handleCheck', url)
}
</script>
<style lang="scss" scoped>
.arco-scrollbar {
  height: 100%;
}
</style>
